<template>
    <yd-lightbox>

            <yd-flexbox style="padding-right: 5px;">
                <yd-flexbox-item v-for="(item, index) in gallery.image_list" v-if="index < 3" :key="item.url">
                    <yd-lightbox-img style="width: 100%;padding-left: 5px;" :src="item.url" :original="item.original"></yd-lightbox-img>
                </yd-flexbox-item>
            </yd-flexbox>

            <yd-flexbox style="padding-right: 5px;padding-top: 5px;">
                <yd-flexbox-item v-for="(item, index) in gallery.image_list" v-if="index >= 3" :key="item.url">
                    <yd-lightbox-img style="width: 100%;padding-left: 5px;" :src="item.url" :original="item.original"></yd-lightbox-img>
                </yd-flexbox-item>
            </yd-flexbox>

            <yd-lightbox-txt>
                <h1 style="font-size: 15px;margin-bottom: 8px;color: #00c3f5;text-align: right;" slot="top">{{ gallery.gallery_title }}</h1>
                <div slot="content" style="text-align: right;">
                    <p>{{ gallery.gallery_desc }}</p>
                </div>
            </yd-lightbox-txt>

    </yd-lightbox>
</template>

<script>
module.exports = {
    props: {
        gallery: {
            type: Object,
            required: true
        }
    }
}
</script>
